<template>
    <div :style="{ height: '500vh', padding: '10px' }">
        <!-- 这边放内容 -->
        <BuyProduct/>
    </div>
    <!-- 自定义购物车图标大小和颜色 -->
    <a-float-button tooltip="购物车" shape="circle" type="primary" :style="{ right: '24px', width: '70px', height: '70px',fontSize: '30px' }" @click="goToCart">
        <template #icon>
            <ShoppingCartOutlined />
        </template>
    </a-float-button>
    <!-- 回到顶部按钮 -->
    <a-back-top tooltip="回到顶部" shape="circle" type="primary" :style="{ right: '24px', bottom: '140px',width: '70px', height: '70px',fontSize: '30px' }"></a-back-top>
</template>

<script >
import { ShoppingCartOutlined } from '@ant-design/icons-vue';
import BuyProduct from './components/BuyProduct.vue'
export default {
    components: {
        ShoppingCartOutlined,
        BuyProduct
    },
    methods: {
        goToCart() {
            // 跳转到购物车页面
            this.$router.push('/cart');
        }
    }
};
</script>